<template>
	<view>
		<u-navbar title="地块地图" :autoBack="true" placeholder>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<view :style="{height: scrollViewHeight, position: 'relative'}">
				<map @callouttap="markertap" @markertap="markertap" id="map" :markers="markers"  :polygons="polygons" enable-satellite :style="{width: '100%', height: scrollViewHeight}" :scale="17" :latitude="latitude"
					:longitude="longitude"></map>
			</view>
		</scroll-view>
		<u-popup :round="10" closeable mode="bottom" :show="showDetail" @close="closeDetail">
			<view style="height: 64rpx;"/>
			<view style="padding: 32rpx;">
				<view style="font-size: 36rpx;color: #333;font-weight: bold;margin-bottom: 16rpx;">{{info.name}}</view>
				<view style="font-size: 28rpx; color: #333;margin-bottom: 8rpx;">
					<span>地块面积: {{info.area}}{{info.areaUnit_dictText}}</span>
				</view>
				<view style="font-size: 30rpx; color: #333;margin-bottom: 8rpx;">
					<span>地块类型: {{info.category_dictText}}</span>
				</view>
				<view style="font-size: 30rpx; color: #333;margin-bottom: 8rpx;">
					<span>地块照片:</span>
					<view style="height: 30rpx;"/>
					<view style="display: inline-block;margin-right: 16rpx;margin-bottom: 16rpx;" v-for="(item, index) in images" :key="index">
						<u--image @click="avatarClick(index)" :showLoading="true" :src="item" width="72px" height="72px"></u--image>
					</view>	
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapActions} from 'vuex';
	import {landInfoList} from '@/api/home.js';
	import {hexToRGB, mapGetCenter} from '@/utils/index.js'
	export default {
		data() {
			return {
				showDetail: false,
				latitude: 29.793867,
				longitude: 106.27836,
				polygons: [],
				markers: [],
				info: {},
				points: []
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor || '#f40215'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + this.bottom + 'px';
			},
			images() {
				if(!this.info.image) {
					return []
				}
				return this.info.image.split(',');
			}
		},
		onLoad() {
			landInfoList({pageNo:1, pageSize: 10}).then(res => {
				this.points = res.result.records;
				let polygons = [];
				let markers = [];
				res.result.records.forEach(item => {
					let points = [];
					let points1 = [];
					item.region.split(';').forEach(item1 => {
						let [latitude,longitude] = item1.split(',');
						points.push({latitude: Number(latitude), longitude: Number(longitude)});
						points1.push([Number(latitude), Number(longitude)])
					})
					let center = mapGetCenter(points1);
					polygons.push({
						points: points,
						fillColor: item.color,
						strokeWidth: 1,
						strokeColor: '#f5f5f5'
					})
					markers.push({
						id: Number(item.id),
						callout: {
							content: item.name,
							padding: 6,
							display: 'ALWAYS',
							fontSize: 12,
							textAlign: 'center',
							borderRadius: 4,
							borderWidth: 2,
							bgColor: '#fff',
							color: item.color
						},
						iconPath: '/static/img/line.png',
						latitude: Number(center[0]),
						longitude: Number(center[1]),
						width: '12px',
						height: '16px',
						rotate: 0,
						alpha: 1
					})
				})
				this.polygons = polygons;
				this.markers = markers;
			})
		},
		methods: {
			avatarClick(index) {
				this.previewImg(index)
			},
			// 预览图片
			previewImg(current) {
				let urls = this.images;
				uni.previewImage({
					current,
					urls,
				});
			},
			closeDetail() {
				this.showDetail = false;
			},
			markertap({markerId}) {
				let cur = this.points.find(item => Number(item.id) === markerId);
				this.info = cur
				this.showDetail = true;
			},
		}
	}
</script>


<style lang="scss" scoped>
	
</style>
